<template>
  <div class="shop-header">
    <nav class="shop-nav">
      <router-link to="/msite"><svg viewBox="0 0 20 32" id="arrow-left.6f6409e" width="100%" height="100%"><path fill="#fff" d="M16.552 5.633L14.508 3.59 2.243 15.853 14.508 28.41l2.044-2.043-10.22-10.513z"></path></svg></router-link>
    </nav>
    <div class="shop-header-main" @click="changeBlock">
      <img :src="shopDetailsList.image_path ? 'https://fuss10.elemecdn.com/'+shopDetailsList.image_path +(shopDetailsList.image_path.substr(-3) == 'peg'? '.jpeg':'.png') +'?imageMogr/format/webp/thumbnail/!130x130r/gravity/Center/crop/130x130/' : ''" alt="">
      <div class="shop-header-content">
        <h2>{{shopDetailsList.name}}</h2>
        <p class="shop-header-p"><span>{{shopDetailsList.delivery_mode?shopDetailsList.delivery_mode.text:'商家配送'}}</span><span>{{shopDetailsList.order_lead_time}}分钟送达</span><span>{{shopDetailsList.piecewise_agent_fee ?shopDetailsList.piecewise_agent_fee.description : ''}}</span></p>
        <div class="shop-header-notice">
          <span>公告：</span>
          <span>{{shopDetailsList.promotion_info ? shopDetailsList.promotion_info:'欢迎光临，用餐高峰期请提前下单，谢谢。'}}</span>
        </div>
        <svg class="shop-header-svg" viewBox="0 0 547 987" id="arrow-right" width="100%" height="100%"><path d="M0 931.973l51.2 54.613 494.933-494.933L51.2.133 0 51.333l440.32 440.32L0 931.973z"></path></svg>
      </div>
    </div>
    <div class="shop-header-btm">
      <div class="header-btm-left">
        <i class="header-btm-i">{{shopDetailsList.activities ? shopDetailsList.activities[0].icon_name: ''}}</i>
        <span class="header-btm-span">
          <span>{{shopDetailsList.activities ? shopDetailsList.activities[0].description: ''}}</span>
        </span>
      </div>
      <div class="header-btm-right">{{shopDetailsList.activities ?shopDetailsList.activities.length:''}}个活动</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shopHeader',
  data () {
    return {
    }
  },
  methods: {
    changeBlock: function () {
      this.$store.commit('HIDEDETAIL')
    }
  },
  computed: {
    shopDetailsList () {
      return this.$store.state.shopDetailsList
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '../../static/hotcss/px2rem.scss';
  .shop-header{
    position: relative;
    padding-bottom: px2rem(60);
    color: #fff;
    font-size: px2rem(22);
    background-color: rgba(119,103,137,.43);
    .shop-nav{
      position: relative;
      padding: px2rem(8) px2rem(20);
      a{
        text-decoration: none;
        display: inline-block;
        width:px2rem(50);
        height:px2rem(50);
        text-align: center;
        line-height:px2rem(50);
        svg{
          width:px2rem(50);
          height:px2rem(50);
        }   
      }
    }
    .shop-header-main{
      display: flex;
      position: relative;
      img{
        width: px2rem(130);
        height: px2rem(130);
        border: 1px solid #fff;
        border-radius: px2rem(8);
        margin: 0 px2rem(20);
      }
      .shop-header-content{
        flex: 1;
        display: block;
        width: 0;
        padding-right: px2rem(10);
        h2{
          margin: 0;
          font-size: px2rem(35);
          font-weight: 700;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .shop-header-p{
          white-space: nowrap;
          height: px2rem(50);
          line-height: px2rem(50);
          span:nth-child(1){
            &:after{
              content: " / ";
              opacity: 0.5;
            }
          }
          span:nth-child(2){
            &:after{
              content: " / ";
              opacity: 0.5;
            }
          }
        }
        .shop-header-notice{
          height: px2rem(50);
          line-height: px2rem(50);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .shop-header-svg{
        position:absolute;
        top: 50%;
        transform: translateY(-50%);
        right: px2rem(10);
        height: px2rem(25);
        width: px2rem(50);
        fill: #fff;
      }
    }
    .shop-header-btm{
      position: absolute;
      left: px2rem(20);
      right: px2rem(20);
      bottom: px2rem(20);
      .header-btm-left{
        display: flex;
        align-items: center;
        padding-right: px2rem(96);
        .header-btm-i{
          margin-right: px2rem(10);
          font-size: px2rem(20);
          font-style: normal;
          height: px2rem(22);
          display: inline-block;
          box-sizing: border-box;
          text-align: center;
          border: 1px solid;
          border-radius:  px2rem(3);
          background-color: rgb(112, 188, 70);
          color: rgb(255, 255, 255);
          border-color: rgb(112, 188, 70);
          line-height: 1;
        }
        .header-btm-span{
            flex: 1;
            display: block;
            width: 0;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
      }
      .header-btm-right{
        position: absolute;
        top: 0;
        right: 0;
      }
    }
  }

</style>